{% extends 'base.html' %}
{% load static %}

{% block title %}登录 - 自动化测试平台{% endblock %}

{% block extra_css %}
<style>
    /* 登录页面专用样式，基于Apifox风格优化 */
    :root {
        --login-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --login-card-bg: rgba(255, 255, 255, 0.95);
        --login-card-blur: 12px;
        --login-input-focus: rgba(102, 126, 234, 0.2);
        --login-btn-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --login-btn-primary-hover: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    }
    
    .login-page {
        min-height: 100vh;
        background: var(--login-bg-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    
    /* 装饰性元素 */
    .login-page::before,
    .login-page::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        filter: blur(60px);
    }
    
    .login-page::before {
        width: 400px;
        height: 400px;
        top: -200px;
        right: -100px;
        animation: float 12s ease-in-out infinite;
    }
    
    .login-page::after {
        width: 500px;
        height: 500px;
        bottom: -250px;
        left: -150px;
        animation: float 15s ease-in-out infinite reverse;
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-30px) rotate(10deg);
        }
    }
    
    .login-container {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 420px;
    }
    
    .login-card {
        background: var(--login-card-bg);
        backdrop-filter: blur(var(--login-card-blur));
        border-radius: var(--radius-lg);
        padding: 2.5rem;
        box-shadow: var(--shadow-card);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all var(--transition-md);
        overflow: hidden;
        position: relative;
    }
    
    .login-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--login-btn-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition-md);
    }
    
    .login-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
    }
    
    .login-card:hover::before {
        transform: scaleX(1);
    }
    
    .login-card .logo-container {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }
    
    .login-card .logo {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background: rgba(102, 126, 234, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
        transition: all var(--transition-md);
    }
    
    .login-card:hover .logo {
        transform: scale(1.05) rotate(5deg);
    }
    
    .login-card .logo i {
        font-size: 2.5rem;
        color: #667eea;
    }
    
    .login-card h1 {
        font-size: 1.875rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .login-card p {
        text-align: center;
        color: var(--color-text-secondary);
        margin-bottom: 2rem;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
        position: relative;
    }
    
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--color-text-primary);
        font-size: 0.875rem;
    }
    
    .input-wrapper {
        position: relative;
        transition: all var(--transition-sm);
    }
    
    .input-wrapper::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-md);
        padding: 1px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        transform: scaleX(0);
        transition: transform var(--transition-md);
    }
    
    .input-wrapper:focus-within::before {
        transform: scaleX(1);
    }
    
    .form-control {
        width: 100%;
        padding: 0.875rem 2.5rem 0.875rem 2.5rem;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-background);
        color: var(--color-text-primary);
        font-size: 0.875rem;
        transition: all var(--transition-sm);
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    
    .form-control:focus {
        outline: none;
        border-color: transparent;
        background-color: var(--color-background);
        box-shadow: 0 0 0 3px var(--login-input-focus);
        transform: translateY(-1px);
    }
    
    .form-control.error {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }
    
    .input-wrapper i {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-text-tertiary);
        z-index: 2;
        transition: color var(--transition-sm);
    }
    
    .input-wrapper:focus-within i {
        color: #667eea;
    }
    
    .password-toggle {
        position: absolute;
        right: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--color-text-tertiary);
        font-size: 0.875rem;
        transition: all var(--transition-sm);
        padding: 0.375rem;
        border-radius: var(--radius-sm);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .password-toggle:hover {
        color: #667eea;
        background-color: var(--color-background-light);
        transform: translateY(-50%) scale(1.1);
    }
    
    .password-toggle:active {
        transform: translateY(-50%) scale(0.95);
    }
    
    .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .forgot-password {
        color: #667eea;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all var(--transition-sm);
        display: inline-flex;
        align-items: center;
        position: relative;
    }
    
    .forgot-password::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background-color: #667eea;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform var(--transition-sm);
    }
    
    .forgot-password:hover {
        color: #5a67d8;
    }
    
    .forgot-password:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }
    
    .btn-primary {
        background: var(--login-btn-primary);
        color: white;
        border: none;
        border-radius: var(--radius-md);
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-sm);
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(102, 126, 234, 0.3);
    }
    
    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }
    
    .btn-primary:hover::before {
        left: 100%;
    }
    
    .btn-primary:hover {
        background: var(--login-btn-primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }
    
    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }
    
    .btn-primary:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }
    
    .login-footer {
        text-align: center;
        color: var(--color-text-tertiary);
        font-size: 0.75rem;
        margin-top: 1.5rem;
    }
    
    /* 错误消息样式 */
    .error-message {
        color: var(--color-danger);
        font-size: 0.75rem;
        margin-top: 0.375rem;
        display: block;
        animation: slideIn 0.2s ease-out;
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 消息提示优化 */
    .alert {
        border-radius: var(--radius-md);
        padding: 0.75rem 1rem;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
        animation: alertSlideIn 0.4s ease-out;
    }
    
    @keyframes alertSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .alert::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }
    
    .alert-success {
        background-color: var(--color-success-light);
        color: var(--color-success-dark);
    }
    
    .alert-success::before {
        background-color: var(--color-success);
    }
    
    .alert-error {
        background-color: var(--color-danger-light);
        color: var(--color-danger-dark);
    }
    
    .alert-error::before {
        background-color: var(--color-danger);
    }
    
    .alert-content {
        display: flex;
        align-items: flex-start;
    }
    
    .alert-content i {
        margin-right: 0.75rem;
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }
    
    /* 加载动画 */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .spinner {
        animation: spin 1s linear infinite;
        margin-right: 0.5rem;
        display: inline-block;
    }
    
    /* 响应式优化 */
    @media (max-width: 480px) {
        .login-page {
            padding: 1rem;
        }
        
        .login-card {
            padding: 2rem 1.5rem;
        }
        
        .form-actions {
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
        }
        
        .forgot-password {
            text-align: center;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="login-page">
        <div class="login-container">
            <div class="login-card">
                <!-- 登录表单标题 -->
                <div class="text-center mb-8">
                    <div class="logo-container">
                        <div class="logo">
                            <i class="fas fa-cubes"></i>
                        </div>
                    </div>
                    <h1>自动化测试平台</h1>
                    <p>高效、可靠的自动化测试解决方案</p>
                </div>
                
                <!-- 消息提示 -->
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}" role="alert">
                            <div class="alert-content">
                                {% if message.tags == 'success' %}
                                    <i class="fas fa-check-circle"></i>
                                {% elif message.tags == 'error' %}
                                    <i class="fas fa-exclamation-circle"></i>
                                {% endif %}
                                <span>{{ message }}</span>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
                
                <!-- 登录表单 -->
                <form method="post" class="login-form">
                    {% csrf_token %}
                    
                    <!-- 用户名输入框 -->
                    <div class="form-group">
                        <label for="username" class="form-label">用户名</label>
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input
                                type="text"
                                id="username"
                                name="username"
                                class="form-control"
                                placeholder="请输入用户名"
                                required
                                autofocus
                            >
                        </div>
                    </div>
                    
                    <!-- 密码输入框 -->
                    <div class="form-group">
                        <label for="password" class="form-label">密码</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input
                                type="password"
                                id="password"
                                name="password"
                                class="form-control"
                                placeholder="请输入密码"
                                required
                            >
                            <span class="password-toggle" id="togglePassword">
                                <i class="far fa-eye"></i>
                            </span>
                        </div>
                    </div>
                    
                    <!-- 表单操作按钮 -->
                    <div class="form-actions">
                        <a href="{% url 'portal:forgot_password' %}" class="forgot-password">忘记密码？</a>
                        <button type="submit" class="btn-primary" id="loginButton">
                            登录
                        </button>
                    </div>
                </form>
                
                <!-- 页脚信息 -->
                <div class="login-footer">
                    <p>© {% now "Y" %} 自动化测试平台 - 版权所有</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script type="module">
    // 导入模块化组件
    import { showNotification } from "{% static 'portal/js/modules/notifications.js' %}";
    import { addRippleEffect, showLoadingIndicator, hideLoadingIndicator } from "{% static 'portal/js/modules/animations.js' %}";
    
    document.addEventListener('DOMContentLoaded', function() {
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');
        
        if (togglePassword && password) {
            // 添加波纹效果
            addRippleEffect(togglePassword);
            
            togglePassword.addEventListener('click', function() {
                // 切换密码输入框的类型
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                
                // 切换图标并添加动画效果
                const icon = this.querySelector('i');
                icon.style.transform = 'scale(0.8)';
                setTimeout(() => {
                    if (type === 'password') {
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                    icon.style.transform = 'scale(1)';
                }, 50);
            });
        }
        
        // 表单提交时添加加载效果
        const loginForm = document.querySelector('.login-form');
        const loginButton = document.getElementById('loginButton');
        
        if (loginForm && loginButton) {
            // 添加波纹效果
            addRippleEffect(loginButton);
            
            loginForm.addEventListener('submit', function(e) {
                // 验证表单
                const username = document.getElementById('username');
                const password = document.getElementById('password');
                let isValid = true;
                
                if (!username.value.trim()) {
                    e.preventDefault();
                    username.focus();
                    showInputError(username, '请输入用户名');
                    isValid = false;
                }
                
                if (!password.value.trim()) {
                    e.preventDefault();
                    password.focus();
                    showInputError(password, '请输入密码');
                    isValid = false;
                }
                
                if (isValid) {
                    // 提交表单时的加载效果
                    
                    // 使用全局加载指示器
                    showLoadingIndicator();
                    
                    loginButton.disabled = true;
                    loginButton.innerHTML = '<i class="fas fa-spinner spinner"></i>登录中...';
                    
                    // 添加轻微的按钮缩放效果
                    loginButton.style.transform = 'scale(0.98)';
                    
                    // 延迟表单提交，以便用户看到加载效果
                    setTimeout(() => {
                        this.submit(); // 实际提交表单
                    }, 500);
                }
            });
        }
        
        // 输入框错误提示
        function showInputError(inputElement, message) {
            // 移除之前可能存在的错误提示
            const existingError = inputElement.parentElement.querySelector('.error-message');
            if (existingError) {
                existingError.remove();
            }
            
            // 创建新的错误提示
            const errorElement = document.createElement('div');
            errorElement.className = 'error-message';
            errorElement.textContent = message;
            inputElement.parentElement.appendChild(errorElement);
            
            // 添加输入框边框错误样式
            inputElement.classList.add('error');
            
            // 添加错误抖动动画
            inputElement.style.animation = 'none';
            inputElement.offsetHeight; // 触发重排
            inputElement.style.animation = 'shake 0.5s ease-in-out';
            
            // 焦点移除时清除错误
            inputElement.addEventListener('focus', function clearError() {
                this.classList.remove('error');
                const errorElement = this.parentElement.querySelector('.error-message');
                if (errorElement) {
                    errorElement.remove();
                }
                this.removeEventListener('focus', clearError);
            }, { once: true });
        }
        
        // 添加抖动动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
                20%, 40%, 60%, 80% { transform: translateX(5px); }
            }
            
            .ripple {
                position: absolute;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, 0.6);
                transform: scale(0);
                pointer-events: none;
                z-index: 3;
            }
        `;
        document.head.appendChild(style);
        
        // 为输入框添加焦点和失焦效果
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            // 焦点效果
            input.addEventListener('focus', function() {
                this.style.transform = 'translateY(-1px)';
                this.style.boxShadow = '0 0 0 3px var(--login-input-focus)';
            });
            
            // 失焦效果
            input.addEventListener('blur', function() {
                this.style.transform = 'translateY(0)';
                if (!this.classList.contains('error') && !this.value.trim()) {
                    this.style.boxShadow = 'none';
                }
            });
            
            // 输入时效果
            input.addEventListener('input', function() {
                // 清除错误状态
                this.classList.remove('error');
                const errorElement = this.parentElement.querySelector('.error-message');
                if (errorElement) {
                    errorElement.remove();
                }
            });
        });
        
        // 键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            // Ctrl+Enter 或 Cmd+Enter 提交表单
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                loginForm?.dispatchEvent(new Event('submit'));
            }
            
            // Escape 清除所有错误
            if (e.key === 'Escape') {
                document.querySelectorAll('.form-control.error').forEach(input => {
                    input.classList.remove('error');
                    const errorElement = input.parentElement.querySelector('.error-message');
                    if (errorElement) {
                        errorElement.remove();
                    }
                });
            }
        });
        
        // 为登录卡片添加平滑的进入动画
        const loginCard = document.querySelector('.login-card');
        if (loginCard) {
            loginCard.style.opacity = '0';
            loginCard.style.transform = 'translateY(20px) scale(0.95)';
            setTimeout(() => {
                loginCard.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
                loginCard.style.opacity = '1';
                loginCard.style.transform = 'translateY(0) scale(1)';
            }, 100);
        }
    });
</script>
{% endblock %}